.archives-wrap
  margin: block-margin 0

.archives
  clearfix()

.archive-year-wrap
  margin-bottom: 1em

.archive-year
  @extend $block-caption

.archives
  column-gap: 10px
  @media mq-tablet
    column-count: 2
  @media mq-normal
    column-count: 3

.archive-article
  avoid-column-break()

.archive-article-inner
  @extend $block
  padding: 10px
  margin-bottom: 15px

.archive-article-title
  text-decoration: none
  font-weight: bold
  color: color-default
  transition: color 0.2s
  &:hover
    color: color-link

.archive-article-footer
  margin-top: 1em

.archive-article-date
  color: color-grey
  text-decoration: none
  font-size: 0.85em
  line-height: 1em
  margin-bottom: 0.5em
  display: block

#page-nav
  clearfix()
  margin: block-margin auto
  text-align: center
  color: color-grey
  overflow: visible
  display: flex
  justify-content: center
  gap: 12px
  #num-bar
    @extend $card
    border-radius: inner-radius
    background: var(--card-btn-bg)
    font-weight: bold
    display: flex
    .current
      background: var(--pagenav-curr-bg)
      color: var(--pagenav-curr-text)
  .page-nav-btn
    @extend $card
    width: 40px
    height: 40px
    background: var(--card-btn-bg)
    border-radius: inner-radius
    font-family: font-icon
    display: flex
    justify-content: center
    align-items: center
    color: var(--card-btn-icon)
    &.disabled
      color: var(--neut-L10)
      pointer-events: none
  a
    color: var(--neut-L75)
    text-decoration: none
    transition: background trans-style
    &:not(.disabled)
      &:hover
        background: var(--card-btn-hover)
      &:active
        background: var(--card-btn-active)

  .page-number
  .space
    width: 40px
    height: 40px
    display: flex
    align-items: center
    justify-content: center
    border-radius: inner-radius
    font-weight: medium
    padding: 0
    @media mq-mobile
      display: none

  .space
    color: color-border

width-date = 10%
width-line = 10%
width-tags = 15%
width-title = 100% - width-date - width-line - width-tags

.archive-main-card
  @extend $card
  padding-top: 32px
  padding-bottom: 32px
  .archive-top
    padding: 0 40px
  
  .archive-title
    @extend $main-title
    margin-left: 40px
    margin-bottom: 16px
  
  .year-line
    display: flex
    margin: 0 44px
    height: 60px
    align-items: center
    margin-top: 8px
    .year-num
      font-size: 24px
      color: var(--archive-year)
      font-weight: bold
      width: width-date
      text-align: right
      transition: color trans-style
      @media mq-mobile
        width: 20%
    .dot-wrapper
      width: width-line
      display: flex
      align-items: center
      justify-content: center
      @media mq-mobile
        width: 15%
      .dot
        width: 12px
        height: 12px
        background: none
        border-radius: 50%
        outline: 3px solid var(--light-dot)
        outline-offset: -2px
        z-index: 1
    .article-count
      width: 40%
      color: var(--neut-L50)
      transition: color trans-style
      

  .archive-article-link
    display: flex
    justify-content: flex-start
    align-items: center
    height: 40px
    transition: background trans-style
    margin: 0 24px
    padding: 0 20px
    border-radius: inner-radius
    &:hover
      background: var(--btn-text-hover)
      .title-inner
        color: var(--btn-text-light-text)
        padding-left: 4px
      .dot
        height: 20px
        background: var(--light-dot)
        outline-color: var(--btn-text-hover)
    &:active
      background: var(--btn-text-active)
      .dot
        outline-color: var(--btn-text-active)

    .date
      font-size: 14px
      color: var(--archive-date)
      width: width-date
      text-align: right
      transition: color trans-style
      @media mq-mobile
        width: 20%
    .line
      width: width-line
      height: 100%
      position: relative
      display: flex
      justify-content: center
      align-items: center
      @media mq-mobile
        width: 15%
      &:before
        content: ''
        width: width-line
        height: 100%
        border-left: 2px dashed var(--archive-dashline)
        position: absolute
        left: calc(50% - 1px)
        top: -50%
        pointer-events: none
        transition: border-color trans-style
        @media mq-mobile
          width: 15%
    .dot
      width: 4px
      height: 4px
      border-radius: 2px
      background: var(--timeline-dim-dot)
      outline: 8px solid var(--card-background)
      transition: background trans-style, height trans-style, outline-color trans-style
      z-index: 10
    .title
      width: width-title
    .title-inner
      font-size: 16px
      padding-right: 32px
      font-weight: bold
      color: var(--archive-title)
      white-space: nowrap
      text-overflow: ellipsis
      overflow: hidden
      transition: padding-left trans-style, color trans-style
    .tags
      color: var(--archive-tags)
      font-size: 14px
      width: width-tags
      text-align: left
      white-space: nowrap
      text-overflow: ellipsis
      overflow: hidden
      transition: color trans-style
      @media mq-mobile
        width: 0
        display: none
